<template>
  <div class="iswiper">
    <ul :style="{marginLeft: marginLeft + 'px', transitionDuration}">
      <li v-for="(item, index) in data" :key="index">
        <nuxt-link to>
          <img :src="item.image" />
        </nuxt-link>
        <div class="info">
          <div class="title">电视影音女装专场</div>
          <div class="stitle">全场最高直播200元</div>
          <nuxt-link to>大牌闪购</nuxt-link>
        </div>
      </li>
    </ul>
    <div class="dot">
      <span :class="{active: marginLeft != -200}"></span>
      <span :class="{active: marginLeft == -200}"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null, // 定时器
      marginLeft: 0, // 左位置
      transitionDuration: "0.5s", // 动画时间
      data: [
        {
          image:
            "http://img11.360buyimg.com/mobilecms/s260x260_jfs/t1/93402/30/15253/349511/5e6f471eE4d0c19f0/184d207e25b87476.jpg.webp"
        },
        {
          image:
            "//img13.360buyimg.com/mobilecms/s260x260_jfs/t1/71580/31/12761/835740/5da026f7E8e1a64b1/78afbf60db5095b6.png.webp"
        },
        {
          image:
            "http://img11.360buyimg.com/mobilecms/s260x260_jfs/t1/93402/30/15253/349511/5e6f471eE4d0c19f0/184d207e25b87476.jpg.webp"
        }
      ]
    };
  },
  mounted() {
    // 设置定时器 4秒执行一次
    this.timer = setInterval(() => {
      // 每次移动一张图片 宽度 的 距离
      this.marginLeft -= 200;
      // 判断是否为最后一张图片
      if (this.marginLeft == -400) {
        // 0.5秒之后切换回第1张（把移动的动画做完）
        setTimeout(() => {
          // 关闭动画
          this.transitionDuration = "0s";
          // 切换回第1张
          this.marginLeft = 0;
          // 延迟开启动画
          setTimeout(() => {
            this.transitionDuration = "0.5s";
          }, 100);
        }, 500);
      }
    }, 3000);
  },
  // 组件销毁之前执行
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss">
$icellWidth: 200px;
.iswiper {
  position: relative;
  width: $icellWidth;
  padding: 40px 0 0px;
  background: #fff;
  overflow: hidden;
  ul {
    width: $icellWidth * 3;
    transition: all;
    li {
      width: $icellWidth;
      float: left;
      text-align: center;
    }
    img {
      width: 60%;
    }
  }
  .info {
    margin-top: 16px;
    padding-bottom: 20px;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5),
      rgba(220, 224, 236, 0.5)
    );
    .title {
      font-size: 14px;
    }
    .stitle {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }
    a {
      padding: 5px;
      color: red;
      border: 1px solid red;
      border-radius: 10px;
      &:after {
        content: ">";
        padding-left: 5px;
      }
    }
  }
  .dot {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    span {
      display: inline-block;
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 50%;
      &.active {
        background: #e1251b;
      }
    }
  }
}
</style>